<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="基础配置">

            <Collapse value="0">
              <Panel>
                常规配置
                <div slot="content">
                  <Form :label-width="120">

                    <FormItem label="系列名称">
                      <Input size="small" v-model="chartOption.funnel.name" placeholder=""/>
                    </FormItem>
                    <FormItem label="漏斗图组件宽度">
                      <Input size="small" v-model="chartOption.funnel.width" placeholder=""/>
                    </FormItem>
                    <FormItem label="数据排序">
                      <Select :transfer="true" size="small" v-model="chartOption.funnel.sort">
                        <Option value="ascending">升序</Option>
                        <Option value="descending">降序</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="指定的数据最小值">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.min"></InputNumber>
                    </FormItem>
                    <FormItem label="指定的数据最大值">
                      <InputNumber size="small" :max="10000000" :min="1" v-model="chartOption.funnel.max"></InputNumber>
                    </FormItem>
                    <FormItem label="最小值映射宽度">
                      <Input size="small" v-model="chartOption.funnel.minSize" placeholder=""/>
                    </FormItem>
                    <FormItem label="最大值映射宽度">
                      <Input size="small" v-model="chartOption.funnel.maxSize" placeholder=""/>
                    </FormItem>
                    <FormItem label="数据图形间距">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.gap"></InputNumber>
                    </FormItem>
                    <FormItem label="上边距">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.top"></InputNumber>
                    </FormItem>
                    <FormItem label="下边距">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.bottom"></InputNumber>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                图形上的文本标签
                <div slot="content">
                  <Form :label-width="120">

                    <FormItem label="显示">
                      <i-switch v-model="chartOption.funnel.label.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="标签位置">
                      <Select :transfer="true" size="small" v-model="chartOption.funnel.label.position">
                        <Option value="inside">内部</Option>
                        <Option value="outside">外部</Option>
                      </Select>
                    </FormItem>
                    <FormItemPanel title="格式化">
                      <Alert style="padding: 8px;">如果格式化回调函数体内容为空，默认显示name值</Alert>
                      <CodeEditor v-model="chartOption.funnel.label.formatter" :showLint="false"
                                  :placeholder="'示例：\n(params) => {\n  return params.name\n}'"></CodeEditor>
                    </FormItemPanel>
                    <FormItem label="字体颜色">
                      <PnColorPicker size="small" v-model="chartOption.funnel.label.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="字体大小">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.label.fontSize"></InputNumber> px
                    </FormItem>
                    <!--<FormItem label="文字水平对齐方式">

                    </FormItem>
                    <FormItem label="文字垂直对齐方式">

                    </FormItem>-->
                    <FormItem label="文字阴影颜色">
                      <PnColorPicker size="small" v-model="chartOption.funnel.label.textShadowColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="文字阴影大小">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.label.textShadowBlur"></InputNumber>
                    </FormItem>

                    <FormItemPanel title="标签引导线">
                      <FormItem label="显示">
                        <i-switch v-model="chartOption.funnel.labelLine.show">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="引导线长度">
                        <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.labelLine.length"></InputNumber>
                      </FormItem>
                      <FormItem label="线宽">
                        <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.labelLine.lineStyle.width"></InputNumber>
                      </FormItem>
                      <FormItem label="线类型">
                        <Select :transfer="true" size="small" v-model="chartOption.funnel.labelLine.lineStyle.type">
                          <Option value="solid">实线</Option>
                          <Option value="dashed">虚线</Option>
                          <Option value="dotted">点线</Option>
                        </Select>
                      </FormItem>
                    </FormItemPanel>

                  </Form>
                </div>
              </Panel>
              <Panel>
                图形数据项样式
                <div slot="content">
                  <Form :label-width="120">

                    <FormItem label="边框颜色">
                      <PnColorPicker size="small" v-model="chartOption.funnel.itemStyle.borderColor" alpha recommend/>
                    </FormItem>
                    <FormItem label="边框宽度">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.itemStyle.borderWidth"></InputNumber>
                    </FormItem>
                    <FormItem label="边框类型">
                      <Select :transfer="true" size="small" v-model="chartOption.funnel.itemStyle.borderType">
                        <Option value="solid">实线</Option>
                        <Option value="dashed">虚线</Option>
                        <Option value="dotted">点线</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="阴影大小">
                      <InputNumber size="small" :max="10000000" :min="0" v-model="chartOption.funnel.itemStyle.shadowBlur"></InputNumber>
                    </FormItem>
                    <FormItem label="阴影颜色">
                      <PnColorPicker size="small" v-model="chartOption.funnel.itemStyle.shadowColor" alpha recommend/>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                自定义色系
                <div slot="content">
                  <Form :label-width="100">
                    <Button class="float-right" size="small" type="primary" @click="addColor"><Icon type="md-add" /> 新增色值</Button>
                    <div class="clearfix"></div>
                    <div class="m-b-10px"></div>

                    <FormItem :label="'色值'+(index+1)" v-for="(c, index) in chartOption.funnel.color" :key="index">
                      <PnColorPicker size="small" v-model="chartOption.funnel.color[index]" alpha recommend/>
                      <a href="javascript:;" class="m-l-5px" style="color: #757575;" @click.stop="deleteColor(index)"><Icon type="md-trash" /></a>
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel>
                提示框
                <div slot="content">
                  <Form :label-width="80">
                    <FormItem label="显示">
                      <i-switch v-model="chartOption.tooltip.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="触发类型">
                      <Select :transfer="true" size="small" v-model="chartOption.tooltip.trigger">
                        <Option v-for="item in $PnChartDict.triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="触发动作">
                      <Select :transfer="true" size="small" v-model="chartOption.tooltip.triggerOn">
                        <Option v-for="item in $PnChartDict.triggerOns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItemPanel title="背景框样式">
                      <FormItem label="背景色">
                        <PnColorPicker size="small" v-model="chartOption.tooltip.backgroundColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="内边距">
                        <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.tooltip.padding"></InputNumber>
                      </FormItem>
                      <FormItem label="边框宽度">
                        <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.tooltip.borderWidth"></InputNumber>
                      </FormItem>
                      <FormItem label="边框颜色">
                        <PnColorPicker size="small" v-model="chartOption.tooltip.borderColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                    <FormItemPanel title="文本样式">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.tooltip.textStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="0" v-model="chartOption.tooltip.textStyle.fontSize"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                  </Form>
                </div>
              </Panel>
              <Panel>
                图例
                <div slot="content">
                  <Form :label-width="80">
                    <FormItem label="显示">
                      <i-switch v-model="chartOption.legend.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="位置">
                      <Select :transfer="true" size="small" v-model="chartOption.legend.position">
                        <Option v-for="item in $PnChartDict.legendPositions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="布局朝向">
                      <Select :transfer="true" size="small" v-model="chartOption.legend.orient">
                        <Option v-for="item in $PnChartDict.orients" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="图标形状">
                      <Select :transfer="true" size="small" v-model="chartOption.legend.icon">
                        <Option v-for="item in $PnChartDict.symbols" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItemPanel title="文本样式">
                      <FormItem label="颜色">
                        <PnColorPicker size="small" v-model="chartOption.legend.textStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="chartOption.legend.textStyle.fontSize"></InputNumber>
                      </FormItem>
                    </FormItemPanel>
                  </Form>
                </div>
              </Panel>
              <Panel v-if="chartOption.title">
                标题
                <ShowToggle class="float-right" v-model="chartOption.title.show"></ShowToggle>
                <div slot="content">
                  <EchartsTitleConfigForm v-model="chartOption.title"></EchartsTitleConfigForm>
                </div>
              </Panel>
              <Panel>
                其他
                <div slot="content">
                  <EchartsOtherConfigForm v-model="compConfigData"></EchartsOtherConfigForm>
                </div>
              </Panel>
            </Collapse>

          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="extend_tab" tab="main_tabs" label="扩展配置">
        <Container v-if="mainTabsValue == 'extend_tab'">
          <CustomOptionDocument :componentId="id"></CustomOptionDocument>
          <CodeEditor v-model="customOption" mode="json"></CodeEditor>
          <EchartsSpreadingCodeForm v-model="echartsSpreadingCode"></EchartsSpreadingCodeForm>
        </Container>
      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="BaseFunnelChart"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="数据项点击时运行">
            <Alert style="padding: 5px;">此脚本中，使用_this指向当前组件vm实例，通过params可获取点击项数据</Alert>
            <CodeEditor v-model="dataItemClickJsCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BaseFunnelChartForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      addColor() {
        this.chartOption.funnel.color.push('')
      },
      deleteColor (index) {
        this.chartOption.funnel.color.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        chartOption: 'component.compConfigData.chartOption'

      })
    }
  }
</script>

<style scoped>

</style>
